<template>
  <el-aside class="index-aside" width="220px">
    <div class="index-aside-inner menulist">
      <div v-for="item in menuList" :key="item.roleName" v-if="role==item.roleName" class="menulist-item">
        <el-menu :mode="'vertical'" :unique-opened="true" class="el-menu-demo" default-active="0">
          <el-menu-item index="0" @click="menuHandler('')">
            <i class="el-icon-s-home menu-icon" /> 首页
          </el-menu-item>
          <el-submenu :index="'1'">
            <template slot="title">
              <i class="el-icon-user menu-icon" />
              <span>个人中心</span>
            </template>
            <el-menu-item :index="'1-1'" @click="menuHandler('updatePassword')">
              <i class="el-icon-key menu-icon" /> 修改密码
            </el-menu-item>
            <el-menu-item :index="'1-2'" @click="menuHandler('center')">
              <i class="el-icon-user-solid menu-icon" /> 个人信息
            </el-menu-item>
          </el-submenu>
          <el-submenu v-for="(menu,index) in item.backMenu" :key="menu.menu" :index="(index+2)+''">
            <template slot="title">
              <i :class="getMenuIcon(menu.menu) + ' menu-icon'" />
              <span>{{ menu.menu }}</span>
            </template>
            <el-menu-item v-for="(child,sort) in menu.child" :key="sort" :index="(index+2)+'-'+sort" @click="menuHandler(child.tableName)">
              <i :class="getMenuIcon(child.menu) + ' menu-icon'" /> {{ child.menu }}
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </div>
  </el-aside>
</template>

<script>
import menu from '@/utils/menu'
export default {
  data() {
    return {
      menuList: [],
      dynamicMenuRoutes: [],
      role: '',
      icons: [
        'el-icon-s-cooperation',
        'el-icon-s-order',
        'el-icon-s-platform',
        'el-icon-s-fold',
        'el-icon-s-unfold',
        'el-icon-s-operation',
        'el-icon-s-promotion',
        'el-icon-s-release',
        'el-icon-s-ticket',
        'el-icon-s-management',
        'el-icon-s-open',
        'el-icon-s-shop',
        'el-icon-s-marketing',
        'el-icon-s-flag',
        'el-icon-s-comment',
        'el-icon-s-finance',
        'el-icon-s-claim',
        'el-icon-s-custom',
        'el-icon-s-opportunity',
        'el-icon-s-data',
        'el-icon-s-check',
        'el-icon-s-grid',
        'el-icon-menu',
        'el-icon-chat-dot-square',
        'el-icon-message',
        'el-icon-postcard',
        'el-icon-position',
        'el-icon-microphone',
        'el-icon-close-notification',
        'el-icon-bangzhu',
        'el-icon-time',
        'el-icon-odometer',
        'el-icon-crop',
        'el-icon-aim',
        'el-icon-switch-button',
        'el-icon-full-screen',
        'el-icon-copy-document',
        'el-icon-mic',
        'el-icon-stopwatch',
      ],
      menulistStyle: '${template.back.menulist.menulistStyle}',
	  menulistBorderBottom: {},
    }
  },
  mounted() {
    const menus = menu.list()
    if(menus) {
        this.menuList = menus
    } else {
        let params = {
            page: 1,
            limit: 1,
            sort: 'id',
        }
        this.$http({
            url: "menu/list",
            method: "get",
            params: params
        }).then(({
            data
        }) => {
            if (data && data.code === 0) {
                this.menuList = JSON.parse(data.data.list[0].menujson);
                this.$storage.set("menus", this.menuList);
            }
        })
    }
    this.role = this.$storage.get('role')
  },
  created(){
    setTimeout(()=>{
      this.menulistStyleChange()
    },10)
    this.icons.sort(()=>{
      return (0.5-Math.random())
    })
	this.lineBorder()
  },
  methods: {
	lineBorder() {
		let style = '${template.back.menulist.menulistStyle}'
		let w = '${template.back.menulist.menulistLineWidth}'
		let s = '${template.back.menulist.menulistLineStyle}'
		let c = '${template.back.menulist.menulistLineColor}'
		if(style == 'vertical') {
			this.menulistBorderBottom = {
				borderBottomWidth: w,
				borderBottomStyle: s,
				borderBottomColor: c
			}
		} else {
			this.menulistBorderBottom = {
				borderRightWidth: w,
				borderRightStyle: s,
				borderRightColor: c
			}
		}
	},
    menuHandler(name) {
      let router = this.$router
      name = '/'+name
      router.push(name)
    },
    // 菜单
    setMenulistHoverColor(){
      let that = this
	  return;
      this.$nextTick(()=>{
        document.querySelectorAll('.menulist .el-menu-item').forEach(el=>{
          el.addEventListener("mouseenter", e => {
            e.stopPropagation()
            el.style.backgroundColor = "${template.back.menulist.menulistHoverColor}"
          })
          el.addEventListener("mouseleave", e => {
            e.stopPropagation()
            // el.style.backgroundColor = "${template.back.menulist.menulistBgColor}"
			el.style.background = "none"
          })
          el.addEventListener("focus", e => {
            e.stopPropagation()
            el.style.backgroundColor = "${template.back.menulist.menulistHoverColor}"
          })
        })
        document.querySelectorAll('.menulist .el-submenu__title').forEach(el=>{
          el.addEventListener("mouseenter", e => {
            e.stopPropagation()
            el.style.backgroundColor = "${template.back.menulist.menulistHoverColor}"
          })
          el.addEventListener("mouseleave", e => {
            e.stopPropagation()
            // el.style.backgroundColor = "${template.back.menulist.menulistBgColor}"
			el.style.background = "none"
          })
        })
      })
    },
    setMenulistIconColor() {
      this.$nextTick(()=>{
        document.querySelectorAll('.menulist .el-submenu__title .el-submenu__icon-arrow').forEach(el=>{
          el.style.color = "${template.back.menulist.menulistIconColor}"
        })
      })
    },
    menulistStyleChange() {
      this.setMenulistIconColor()
      this.setMenulistHoverColor()
      this.setMenulistStyleHeightChange()
      let str = "2"
      if(1 == str) {
        this.$nextTick(()=>{
          document.querySelectorAll('.el-container .el-container').forEach(el=>{
            el.style.display = "block"
            el.style.paddingTop = "60px" // header 高度
          })
          document.querySelectorAll('.el-aside').forEach(el=>{
            el.style.width = "100%"
            el.style.height = "auto"
            el.style.paddingTop = '0'
          })
          document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
            el.style.paddingTop = '0'
			el.style.width = "100%"
          })
        })
      }
      if(2 === str) {
        this.$nextTick(()=>{
          document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
            el.style.paddingTop = "60px"
          })
        })
      }
    },
    setMenulistStyleHeightChange() {
		return;
      this.$nextTick(()=>{
        document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-menu-item').forEach(el=>{
          el.style.height = "${template.back.menulist.menulistHeight}"
          el.style.lineHeight = "${template.back.menulist.menulistHeight}"
        })
        document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-submenu>.el-submenu__title').forEach(el=>{
          el.style.height = "${template.back.menulist.menulistHeight}"
          el.style.lineHeight = "${template.back.menulist.menulistHeight}"
        })
      })
    },
    getMenuIcon(menuName) {
      // 根据菜单名称返回合适的 Element-UI 图标
      if (menuName.includes('班级')) return 'el-icon-s-custom';
      if (menuName.includes('学生')) return 'el-icon-user';
      if (menuName.includes('教师')) return 'el-icon-s-custom';
      if (menuName.includes('实习单位')) return 'el-icon-office-building';
      if (menuName.includes('作业')) return 'el-icon-document';
      if (menuName.includes('成绩')) return 'el-icon-s-data';
      if (menuName.includes('系统')) return 'el-icon-setting';
      if (menuName.includes('管理')) return 'el-icon-menu';
      if (menuName.includes('中心')) return 'el-icon-user';
      if (menuName.includes('评价')) return 'el-icon-star-on';
      return 'el-icon-menu';
    },
  }
}
</script>
<style lang="scss" scoped>
.el-container {
  display: block;
}
.index-aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #e6f3ff 0%, #fafdff 100%);
  box-shadow: 2px 0 12px 0 rgba(64,158,255,0.08);
  width: 220px !important;
  min-width: 220px;
  .index-aside-inner {
    height: 100%;
    margin-right: -17px;
    margin-bottom: -17px;
    overflow: scroll;
    overflow-x: hidden !important;
    padding-top: 60px;
    box-sizing: border-box;
    &:focus {
      outline: none;
    }
    & /deep/ .el-menu {
      border: 0;
      background-color: transparent;
    }
  }
  .menulist-item {
    width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
  }
  .el-menu-demo {
    min-height: calc(100vh - 60px);
    background: transparent;
    & > .el-menu-item,
    & /deep/ .el-submenu__title {
      width: 95%;
      margin: 18px auto;
      border-radius: 14px !important;
      background: #fff !important;
      color: #333 !important;
      font-size: 17px;
      font-weight: 500;
      box-shadow: 0 2px 12px 0 rgba(64,158,255,0.08);
      border: none !important;
      transition: background 0.18s cubic-bezier(0.4,0,0.2,1), color 0.18s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s cubic-bezier(0.4,0,0.2,1), border-radius 0.18s cubic-bezier(0.4,0,0.2,1);
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 18px 28px !important;
      height: 56px !important;
      .menu-icon {
        margin-right: 14px;
        font-size: 22px;
        color: #409EFF;
        vertical-align: middle;
      }
      &:hover, &.is-active {
        background: #e6f3ff !important;
        color: #409EFF !important;
        box-shadow: 0 4px 16px 0 rgba(64,158,255,0.12);
      }
    }
    & /deep/ .el-menu.el-menu--inline {
      width: 95%;
      margin: 0 auto 12px;
      background: transparent;
      .el-menu-item {
        width: 100%;
        height: 48px;
        line-height: 48px;
        margin: 10px 0;
        color: #333 !important;
        font-size: 16px;
        border-radius: 10px;
        background: #fafdff !important;
        box-shadow: 0 1px 4px 0 rgba(64,158,255,0.04);
        text-align: left;
        min-width: auto;
        transition: background 0.18s cubic-bezier(0.4,0,0.2,1), color 0.18s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s cubic-bezier(0.4,0,0.2,1), border-radius 0.18s cubic-bezier(0.4,0,0.2,1);
        display: flex;
        align-items: center;
        .menu-icon {
          margin-right: 12px;
          font-size: 20px;
          color: #409EFF;
        }
        &:hover, &.is-active {
          background: #e6f3ff !important;
          color: #409EFF !important;
        }
      }
    }
  }
}
</style>
<style>

.el-menu--horizontal .el-menu--popup {
		width: 150px;
		height: auto;
		padding: 0;
		margin: 0px auto 20px;
		border-radius: 4px;
		border-width: 0;
		border-style: solid;
		border-color: rgba(0,0,0,.3);
		background-color: #fff;
		box-shadow: 0 0 0px rgba(0, 0, 0, .3);
		min-width: auto;
		}
.el-menu--horizontal .el-menu--popup .el-menu-item {
			width: 100%;
			height: 44px;
			line-height: 44px;
			padding: 0;
			margin: 10px 0;
			color: #000 !important;
			font-size: 14px;
			border-radius: 0;
			border-width: 0 5px 5px;
			border-style: solid;
			border-color: rgba(109, 109, 148, 1);
			background-color: #fff !important;
			box-shadow: 0 0 6px rgba(30, 144, 255, 0);
			text-align: center;
			min-width: auto;
			} 
	.el-menu--horizontal .el-menu--popup .el-menu-item:hover {
				width: 100%;
				height: 44px;
				line-height: 44px;
				padding: 0;
				margin: 10px 0;
				color: rgba(0, 0, 0, 1) !important;
				font-size: 14px;
				border-radius: 0;
				border-width: 0 5px 5px;
				border-style: solid;
				border-color: rgba(109, 109, 148, 1);
				background-color: rgba(0, 0, 0, 0) !important;
				box-shadow: 0 0 0px rgba(30, 144, 255, 0);
				text-align: center;
			}
</style>
